<script setup lang="ts">
import CpNavbar from '@/components/cp-navbar.vue'
import { getAllDep } from '@/services/consult'
import useConsultStore from '@/stores/modules/consult'
import { showConfirmDialog, type TreeSelectChild } from 'vant'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const activeId = ref('') //二级科室
const activeIndex = ref(0) //一级科室下标
const allDepList = ref<any[]>([])
onMounted(async () => {
  const res = await getAllDep()

  allDepList.value = res.data.map((item) => {
    return {
      text: item.name,
      id: item.id,
      children: item.child.map((item1) => {
        return {
          text: item1.name,
          id: item1.id
        }
      })
    }
  })
})

//选择科室
const router = useRouter()
const consultStore = useConsultStore()
const setDep = (item: TreeSelectChild) => {
  consultStore.setDep(activeId.value)

  showConfirmDialog({
    title: '请确认科室',
    message: `您选择的科室为${item.text}`
  }).then(() => {
    router.push('/consult/illness')
  })
}
</script>

<template>
  <div class="consult-dep-page">
    <CpNavbar title="选择科室" />
    <van-tree-select
      @click-item="setDep"
      v-model:active-id="activeId"
      v-model:main-active-index="activeIndex"
      :items="allDepList"
    />
  </div>
</template>

<style lang="scss" scoped>
.consult-dep-page {
  padding-top: 46px;
}
.van-tree-select {
  height: calc(100vh - 46px) !important;
}
</style>
